<template>
  <div>
    <el-row>
      <header-layout></header-layout>
    </el-row>
    <!-- <el-row type="flex" :gutter="20">
      <el-col :span="6">
        <alarm-card
          :card_icon="'./static/img/red.png'"
          :card_data="['Safety Alert:','Hold Beer:','Block Beer:', 'BWC Alert:']"
          :card_title="'Master Alarm'"
        ></alarm-card>
      </el-col>
      <el-col
        class="one-two-class"
        :span="6"
      >
        <el-row type="flex" align="middle" :gutter="0">
          <pcytd-card
            v-model="ytd_data"
            :card_title="'PC YTD'"
          ></pcytd-card>
        </el-row>
        <el-row type="flex" align="middle" :gutter="0">
          <by-department-card :card_title="'By Department'"></by-department-card>
        </el-row>
      </el-col>
      <el-col :span="12">
        <pcytd-by-month-card :card_title="'PC YTD by Month'"></pcytd-by-month-card>
      </el-col>
      <!-- <el-col :span="6">
      <slider-bar v-model="value"></slider-bar>
      {{ value }}
      <button @click="fn">修改父组件的值</button>
    </el-col> -->
    <!-- </el-row> -->
    <!-- <el-row type="flex" :gutter="20">
      <el-col :span="6">
        <ytd-element-card :card_title="'PC YTD'" :value="'50.41%'" :type="1" :card_icon="'./static/img/blue_set.png'"></ytd-element-card>
      </el-col>
      <el-col :span="6">
        <ytd-element-card :card_title="'MO YTD'" :value="'46.41%'" :type="2" :card_icon="'./static/img/yellow_set.png'"></ytd-element-card>
      </el-col>
      <el-col :span="6">
        <ytd-element-card :card_title="'CC YTD'" :value="'4,054,876'" :type="3" :card_icon="'./static/img/green_set.png'"></ytd-element-card>
      </el-col>
      <el-col :span="6">
        <ytd-element-card :card_title="'BS YTD'" :value="'46.43%'" :type="4" :card_icon="'./static/img/red_set.png'"></ytd-element-card>
      </el-col>
    </el-row> -->
    <!-- <el-row :gutter="20">
      <el-col :span="8">
        <by-department-card></by-department-card>
      </el-col>
      <el-col :span="8">
        <by-department-card></by-department-card>
      </el-col>
      <el-col :span="8">
        <by-department-card></by-department-card>
      </el-col>
    </el-row> -->
    <el-row>
      <manage-table
        :dataArr="tableData"
        :colHeadArr="tableColHeadArr"
      ></manage-table>
    </el-row>

    <float-tools></float-tools>

  </div>
</template>
<script>
import AutoMenu from "@/pages/home/components/AutoMenu";
import AlarmCard from "@/pages/contents/main/components/AlarmCard";
import pcytdCard from "@/pages/contents/main/components/PC_YTDCard";
const SliderBar = () => import("@/pages/contents/main/components/SliderBar");
const ByDepartmentCard = () =>
  import("@/pages/contents/main/components/ByDepartmentCard");
const pcytdByMonthCard = () => import('@/pages/contents/main/components/PC_YTD_byMonthCard');
const ytdElementCard = () => import('@/pages/contents/main/components/YTDElementCard');
const FloatTools = () => import('@/pages/contents/system_configuration/manage/components/FloatTools')

export default {
  components: {
    AutoMenu,
    AlarmCard,
    pcytdCard,
    SliderBar,
    ByDepartmentCard,
    pcytdByMonthCard,
    ytdElementCard,
    FloatTools,
    ManageTable: () => import('@/pages/contents/system_configuration/manage/components/ManageTable'),
    HeaderLayout: () => import('@/pages/contents/system_configuration/SysComponents/HeaderLayout')
  },
  methods: {
    handleOpen (key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose (key, keyPath) {
      // console.log(key, keyPath);
    }
  },
  data () {
    return {
      isCollapse: false,
      ytd_data: {
        value: 92.12,
        mbasis: "-8.5%",
        wbasis: "+5.3%",
        myear: "+7.6%"
      },
      tableColHeadArr: this.$store.state.sys.userManageTableHead,
      tableData: [
        {
          id: 1,
          username: 'admin',
          phone: '18435134444',
          sex: 'male',
          enable: true,
          createTime: '2019-4-11',
          updateTime: '2019-4-11',
          email: '1111111111@qq.com'
        },
        {
          id: 1,
          username: 'admin',
          phone: '18435134444',
          sex: 'male',
          enable: true,
          createTime: '2019-4-11',
          updateTime: '2019-4-11',
          email: '1111111111@qq.com'
        }, {
          id: 1,
          username: 'admin',
          phone: '18435134444',
          sex: 'male',
          enable: true,
          createTime: '2019-4-11',
          updateTime: '2019-4-11',
          email: '1111111111@qq.com'
        }, {
          id: 1,
          username: 'admin',
          phone: '18435134444',
          sex: 'male',
          enable: true,
          createTime: '2019-4-11',
          updateTime: '2019-4-11',
          email: '1111111111@qq.com'
        }, {
          id: 1,
          username: 'admin',
          phone: '18435134444',
          sex: 'male',
          enable: true,
          createTime: '2019-4-11',
          updateTime: '2019-4-11',
          email: '1111111111@qq.com'
        }
      ]
    };
  },
  mounted () {
  }
};
</script>
<style scoped>
.one-two-class {
  line-height: 20px;
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
  /* width: 300px; */
  /* margin-right: 20px */
}
</style>

